<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="show"
    :width="width"
    :top="top"
    :before-close="handleClose"
    custom-class="common-dialog"
  >
    <slot />
  </el-dialog>
</template>

<script>
export default {
  name: 'ComDialog',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    close: Function,
    show: Boolean,
    title: {
      type: String,
      default: (_) => '消息框'
    },
    width: {
      type: [String, Number],
      default: (_) => '30vw'
    },
    top: {
      type: [String, Number],
      default: (_) => '0'
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.common-dialog {
  ::v-deep &.el-dialog {
    .el-dialog__header {
      //text-align: center;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0 0 0 20px !important;
      background-color: #f8f8f9;
      color: #333;

      .el-dialog__title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }

      .el-dialog__headerbtn {
        top: 17px;
        right: 20px;

        .el-icon-close {
          width: 16px;
          height: 16px;
          color: #333;
        }
      }
    }

    .el-dialog__body {
      margin: 0 auto;
      padding: 0 !important;
      max-height: calc(100vh - 100px);
      min-height: 100px;
      overflow: auto;

      .dialog-content {
        padding: 20px;
      }
    }
  }
}
</style>
